<script setup>
import { ref } from 'vue'

defineProps({
  total: {
    type: Number,
    required: true,
    default: 0,
    validator: (value) => {
      return value >= 0
    },
  },
})
const emits = defineEmits(['pageSizeChangeEvent', 'currentPageChangeEvent'])
const currentPage = ref(1)
const pageSize = ref(15)
</script>

<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[15, 30, 45, 60]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="(newPageSize) => emits('pageSizeChangeEvent', newPageSize)"
      @current-change="(newCurrentPage) => emits('currentPageChangeEvent', newCurrentPage)"
    />
  </div>
</template>

<style lang="scss" scoped>
.pagination-container {
  display: flex; /* 关键：父容器启用 flex 布局 */
  justify-content: flex-end; /* 直接右对齐子元素（推荐） */
  margin-top: 16px; /* 可选：添加间距 */
}
</style>
